<template>
  <!-- info -->
  <div>
    <!-- search -->
    <div class="query-form">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="searchInfo.gname" placeholder="游戏名称模糊查询"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="btnSearch" v-model="searchInfo.publisher">
            {{ btnSearchText }}
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button @click="search" type="primary">查询</el-button>
            <el-button @click="reset" type="danger">重置</el-button>
          </el-button-group>
          <el-button @click="showadd" type="success" style="margin-left: 1rem">添加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- table -->
    <div>
      <el-table :data="list">
        <el-table-column label="游戏名称" prop="gname" width="200"></el-table-column>
        <el-table-column label="游戏简介" prop="intro"></el-table-column>
        <el-table-column
          label="游戏发行商"
          prop="tbGamePublisher.publisher"
          width="200"
        ></el-table-column>
        <el-table-column label="游戏发布时间" width="200">
          <template #default="scope">
            {{ tools.formatDate(scope.row.created, 'yyyy-MM-dd') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="showmodify(scope.row)" type="warning" size="small">修改</el-button>
            <el-button @click="del(scope.row)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- page -->
    <div class="page">
      <el-pagination
        v-model:current-page="page.pageNumber"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[2, 5, 10, 15]"
        @size-change="getList"
        layout="prev,pager,next,total,sizes"
        @current-change="getList"
      >
      </el-pagination>
    </div>
  </div>

  <!-- dialog -->
  <div>
    <div>
      <el-dialog v-model="gvisible" title="选择游戏发行商" width="30%">
        <GamePublisherComp @type-selected="selectedType" mode="selector"></GamePublisherComp>
      </el-dialog>
    </div>

    <!-- add dialog -->
    <div>
      <el-dialog v-model="avisible" title="添加游戏" @closed="closeadd">
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="addInfo.gname" placeholder="请输入游戏名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                v-model="addInfo.intro"
                placeholder="请输入游戏简介"
                type="textarea"
                rows="5"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button @click="btnAdd" v-model="addInfo.publisher">
                {{ btnAddText }}
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-date-picker
                type="datetime"
                placeholder="请选择日期"
                v-model="addInfo.created"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="success" @click="add">确定</el-button>
          <el-button type="danger" @click="avisible = false">取消</el-button>
        </template>
      </el-dialog>
    </div>

    <!-- modify dialog -->
    <div>
      <el-dialog v-model="mvisible" title="修改游戏信息" @closed="closeModify">
        <div>
          <el-form>
            <el-form-item>
              <el-input v-model="modifyInfo.gname" placeholder="请输入游戏名称"></el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                v-model="modifyInfo.intro"
                placeholder="请输入游戏简介"
                type="textarea"
                rows="5"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button @click="btnModify" v-model="modifyInfo.publisher">
                {{ btnModifyText }}
              </el-button>
            </el-form-item>

            <el-form-item>
              <el-date-picker
                type="datetime"
                placeholder="请选择日期"
                v-model="modifyInfo.created"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <el-button type="warning" @click="modify">确定</el-button>
          <el-button type="danger" @click="mvisible = false">取消</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import GamePublisherComp from '@/components/GamePublisherComp.vue'
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

//#region 组件的部分
const gvisible = ref(false)
const type = ref({})
const typemode = ref('add')

const selectedType = (typeinfo) => {
  type.value = typeinfo
  if (typemode.value == 'search') {
    searchInfo.value.publisher = typeinfo.gpid
    btnSearchText.value = typeinfo.publisher
  } else if (typemode.value == 'add') {
    addInfo.value.publisher = typeinfo.gpid
    btnAddText.value = typeinfo.publisher
  } else if (typemode.value == 'modify') {
    modifyInfo.value.publisher = typeinfo.gpid
    btnModifyText.value = typeinfo.publisher
  }
  gvisible.value = false
}

//#endregion

//#region 数据的部分
const list = ref([])
const page = ref({
  pageSize: 10,
  pageNumber: 1,
})
const searchInfo = ref({
  publisher: '',
  gname: '',
})
const btnSearchText = ref('请选择发行商')
const btnSearch = () => {
  typemode.value = 'search'
  gvisible.value = true
  if (searchInfo.value.publisher == '') {
    btnSearchText.value = '请选择发行商'
  } else {
    btnSearchText.value = type.value.publisher
  }
}
const getList = () => {
  api.get(
    `/crud/game/${page.value.pageSize}/${page.value.pageNumber}`,
    searchInfo.value,
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '查询失败')
    },
  )
}
onMounted(() => {
  getList()
})
const search = () => {
  page.value.pageNumber = 1
  getList()
}
const reset = () => {
  page.value.pageNumber = 1
  searchInfo.value = {
    publisher: '',
    gname: '',
  }
  btnSearchText.value = '请选择发行商'
  getList()
}
//#endregion

//#region 添加的部分
const avisible = ref(false)
const addInfo = ref({
  gname: '',
  intro: '',
  created: '',
  publisher: -1,
})
const showadd = () => {
  addInfo.value = {
    gname: '',
    intro: '',
    created: '',
    publisher: -1,
  }
  avisible.value = true
}
const btnAddText = ref('请选择发行商')
const btnAdd = () => {
  typemode.value = 'add'
  gvisible.value = true
  if (addInfo.value.publisher == -1) {
    btnAddText.value = '请选择发行商'
  } else {
    btnAddText.value = type.value.publisher
  }
}
const closeadd = () => {
  addInfo.value = {
    gname: '',
    intro: '',
    created: '',
    publisher: -1,
  }
  avisible.value = false
}
const add = () => {
  api.post('/crud/game', addInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      addInfo.value = {
        gname: '',
        intro: '',
        created: '',
        publisher: -1,
      }
      avisible.value = false
      search()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}

//#endregion

//#region 修改的部分
const mvisible = ref(false)
const modifyInfo = ref({
  gname: '',
  intro: '',
  created: '',
  publisher: -1,
})
const showmodify = (info) => {
  modifyInfo.value = tools.mergeJson(info)
  modifyInfo.value.created = tools.formatDate(info.created)
  btnModifyText.value = info.tbGamePublisher.publisher
  mvisible.value = true
}
const btnModifyText = ref('请选择发行商')
const btnModify = () => {
  typemode.value = 'modify'
  gvisible.value = true
  if (modifyInfo.value.publisher == showmodify.value.publisher) {
    btnModifyText.value = modifyInfo.value.tbGamePublisher.publisher
  } else {
    btnModifyText.value = type.value.publisher
  }
}
const closeModify = () => {
  modifyInfo.value = {
    gname: '',
    intro: '',
    created: '',
    publisher: -1,
  }
  mvisible.value = false
}
const modify = () => {
  api.put('/crud/game', modifyInfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message)
      modifyInfo.value = {
        gname: '',
        intro: '',
        created: '',
        publisher: -1,
      }
      mvisible.value = false
      search()
      return
    }
    ElMessageBox.alert(data.message, '添加失败')
  })
}

//#endregion

//#region 删除的部分

const del = (info) => {
  ElMessageBox.alert(`确定要删除：${info.gname}吗?`, '删除游戏', { type: 'warning' })
    .then(() => {
      api.delete(`/crud/game/${info.gid}`, {}, (data) => {
        if (data.success) {
          ElMessage.success(data.message)
          search()
          return
        }
        ElMessageBox.alert(data.message, '删除失败')
      })
    })
    .catch(() => {})
}

//#endregion
</script>

<style scoped></style>
